﻿<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:Converters="clr-namespace:MixModes.Synergy.VisualFramework.Converters;assembly=MixModes.Synergy.VisualFramework"
             mc:Ignorable="d"
             x:Class="Flipbook.Controls.EditorRibbonControl"
             x:Name="UserControl"
             Background="{StaticResource RibbonBackgroundBrush}"
             d:DesignWidth="640"
             d:DesignHeight="100">
    <UserControl.Resources>
        <Converters:EnumValueMatcherConverter x:Key="EnumValueMatcherConverter" />
        <Style x:Key="VerticalDivider"
               TargetType="{x:Type Line}">
            <Setter Property="X1"
                    Value="6" />
            <Setter Property="Y1"
                    Value="0" />
            <Setter Property="X2"
                    Value="6" />
            <Setter Property="Y2"
                    Value="{Binding ElementName=UserControl, Path=Height}" />
            <Setter Property="Width"
                    Value="12" />
            <Setter Property="Stroke"
                    Value="{StaticResource VerticalFadingBorderBrush}" />
            <Setter Property="StrokeThickness"
                    Value="0.125" />
        </Style>
        <Style x:Key="ToolRadioButtonStyle"
               TargetType="{x:Type ToggleButton}"
               BasedOn="{StaticResource TileRadioButtonStyle}">
            <Setter Property="Height"
                    Value="80" />
            <Setter Property="Width"
                    Value="80" />
            <Style.Triggers>
                <Trigger Property="IsEnabled"
                         Value="False">
                    <Setter Property="IsChecked"
                            Value="False" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="ToolButtonStyle"
               TargetType="{x:Type Button}"
               BasedOn="{StaticResource TileButtonStyle}">
            <Setter Property="Height"
                    Value="80" />
            <Setter Property="Width"
                    Value="80" />
            <Setter Property="Focusable"
                    Value="False" />
        </Style>
        <Style x:Key="NewButtonStyle"
               TargetType="{x:Type Button}"
               BasedOn="{StaticResource ToolButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/New_Black.png"
                               Stretch="None" />
                        <TextBlock Text="New"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/New_White.png"
                                       Stretch="None" />
                                <TextBlock Text="New"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="OpenButtonStyle"
               TargetType="{x:Type Button}"
               BasedOn="{StaticResource ToolButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Open_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Open"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Open_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Open"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="SaveButtonStyle"
               TargetType="{x:Type Button}"
               BasedOn="{StaticResource ToolButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Save_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Save"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Save_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Save"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="DrawButtonStyle"
               TargetType="{x:Type RadioButton}"
               BasedOn="{StaticResource ToolRadioButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Edit_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Draw"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsChecked"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Edit_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Draw"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="TraceButtonStyle"
               TargetType="{x:Type ToggleButton}"
               BasedOn="{StaticResource ToolRadioButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Trace_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Trace"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsChecked"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Trace_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Trace"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="EraseButtonStyle"
               TargetType="{x:Type RadioButton}"
               BasedOn="{StaticResource ToolRadioButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Erase_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Erase"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsChecked"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Erase_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Erase"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="FlipButtonStyle"
               TargetType="{x:Type ToggleButton}"
               BasedOn="{StaticResource ToolRadioButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Flip_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Flip"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsChecked"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Flip_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Flip"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="SelectButtonStyle"
               TargetType="{x:Type RadioButton}"
               BasedOn="{StaticResource ToolRadioButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Select_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Select"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsChecked"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Select_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Select"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="AddCanvasButtonStyle"
               TargetType="{x:Type Button}"
               BasedOn="{StaticResource ToolButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Add_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Add"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Add_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Add"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="RemoveCanvasButtonStyle"
               TargetType="{x:Type Button}"
               BasedOn="{StaticResource ToolButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Delete_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Remove"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Delete_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Remove"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="CloneCanvasButtonStyle"
               TargetType="{x:Type Button}"
               BasedOn="{StaticResource ToolButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Clone_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Clone"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Clone_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Clone"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="RewindButtonStyle"
               TargetType="{x:Type Button}"
               BasedOn="{StaticResource ToolButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Rewind_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Rewind"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Rewind_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Rewind"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="PlayButtonStyle"
               TargetType="{x:Type Button}"
               BasedOn="{StaticResource ToolButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Play_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Play"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Play_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Play"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="ForwardButtonStyle"
               TargetType="{x:Type Button}"
               BasedOn="{StaticResource ToolButtonStyle}">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Margin="4">
                        <Image Source="../Images/Forward_Black.png"
                               Stretch="None" />
                        <TextBlock Text="Forward"
                                   HorizontalAlignment="Center" />
                    </StackPanel>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Margin="4">
                                <Image Source="../Images/Forward_White.png"
                                       Stretch="None" />
                                <TextBlock Text="Forward"
                                           HorizontalAlignment="Center" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <StackPanel Margin="10"
                    Orientation="Horizontal">
            <Button Style="{DynamicResource NewButtonStyle}"
                    Command="{Binding Path=NewCommand}" />
            <Button Style="{DynamicResource OpenButtonStyle}"
                    Command="{Binding Path=OpenCommand}" />
            <Button Style="{DynamicResource SaveButtonStyle}"
                    Command="{Binding Path=SaveCommand}" />
            <Line Style="{StaticResource VerticalDivider}" />
            <RadioButton Style="{DynamicResource DrawButtonStyle}"
                         IsChecked="{Binding Path=DesignerProperties.EditingMode, 
                                             Mode=OneWay,
                                             Converter={StaticResource EnumValueMatcherConverter}, 
                                             ConverterParameter={x:Static InkCanvasEditingMode.Ink}}"
                         Command="{Binding Path=DesignerProperties.ChangeEditingModeCommand}"
                         CommandParameter="{x:Static InkCanvasEditingMode.Ink}" />
            <ToggleButton x:Name="TraceButton"
                          Style="{DynamicResource TraceButtonStyle}"
                          IsEnabled="{Binding Path=DesignerProperties.EditingMode, 
                                              Mode =OneWay,
                                              Converter={StaticResource EnumValueMatcherConverter}, 
                                              ConverterParameter={x:Static InkCanvasEditingMode.Ink}}"
                          IsChecked="{Binding Path=IsTraceEnabled, Mode=TwoWay}" />
            <ToggleButton x:Name="FlipButton"
                          Style="{DynamicResource FlipButtonStyle}"
                          IsChecked="{Binding Path=IsFlipEnabled, Mode=TwoWay}" />
            <RadioButton Style="{DynamicResource EraseButtonStyle}"
                         IsChecked="{Binding Path=DesignerProperties.EditingMode, 
                                             Mode=OneWay,
                                             Converter={StaticResource EnumValueMatcherConverter}, 
                                             ConverterParameter={x:Static InkCanvasEditingMode.EraseByPoint}}"
                         Command="{Binding Path=DesignerProperties.ChangeEditingModeCommand}"
                         CommandParameter="{x:Static InkCanvasEditingMode.EraseByPoint}" />
            <RadioButton Style="{DynamicResource SelectButtonStyle}"
                         IsChecked="{Binding Path=DesignerProperties.EditingMode, 
                                             Mode=OneWay,
                                             Converter={StaticResource EnumValueMatcherConverter}, 
                                             ConverterParameter={x:Static InkCanvasEditingMode.Select}}"
                         Command="{Binding Path=DesignerProperties.ChangeEditingModeCommand}"
                         CommandParameter="{x:Static InkCanvasEditingMode.Select}" />
            <Line Style="{StaticResource VerticalDivider}" />
            <Button Style="{DynamicResource AddCanvasButtonStyle}"
                    Command="{Binding Path=AddCanvasCommand}" />
            <Button Style="{DynamicResource RemoveCanvasButtonStyle}"
                    Command="{Binding Path=RemoveCanvasCommand}" />
            <Button Style="{DynamicResource CloneCanvasButtonStyle}"
                    Command="{Binding Path=CloneCanvasCommand}" />
            <Line Style="{StaticResource VerticalDivider}" />
            <Button Style="{DynamicResource RewindButtonStyle}"
                    Command="{Binding Path=RewindCommand}" />
            <Button Style="{DynamicResource PlayButtonStyle}"
                    Command="{Binding Path=PlayCommand}" />
            <Button Style="{DynamicResource ForwardButtonStyle}"
                    Command="{Binding Path=ForwardCommand}" />
            <StackPanel VerticalAlignment="Center"
                        Margin="4,0,0,0">
                <TextBlock Text="Frame Rate" 
                           HorizontalAlignment="Center"/>
                <Slider Width="100"
                        Minimum="10"
                        Maximum="80" 
                        Margin="0,10,0,0"
                        Value="{Binding FrameRate, Mode=TwoWay}"/>
                <DockPanel LastChildFill="False"
                           Margin="0,10,0,0">
                    <TextBlock Text="Normal"
                               Margin="0,0,0,0"
                               DockPanel.Dock="Left"/>
                    <TextBlock Text="Fast"
                               DockPanel.Dock="Right" />
                </DockPanel>                
            </StackPanel>
        </StackPanel>
        <Border BorderThickness="0,0,0,1"
                BorderBrush="{StaticResource FadingBorderBrush}" />
    </Grid>
</UserControl>